<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style >
      *{
        margin: 0;
        padding: 0;
      }
      #wrap{
        width: 500px;
        height: 500px;
        background: skyblue;
        margin: 20px auto;
      }
       #wrap ul{
            width: 500px;
            height: 60px;
            display: flex;
            justify-content: space-between;
       }
      #wrap ul li{
          width: 60px;
          height: 60px;
          background: darkcyan;
          list-style: none;
          text-align: center;
          line-height: 60px;
          cursor: pointer;
      }
      #wrap .content{
        width: 490px;
        height: 430px;
        border:5px solid red;
      }
      #wrap .content div{
          width: 490px;
        height: 430px;
        display: none;
      }
      #wrap .content div:nth-child(1){
        display: block;
      }
      #wrap ul .active{
        background: darkorchid;
        color: white;
      }
  </style>
</head>
<body>
  <div id="wrap">
      <ul>
          <li class="active">新闻</li>
          <li>军事</li>
          <li>论坛</li>
          <li>美妆</li>
      </ul>
      <div class="content">
        <div>新闻新闻新闻新闻</div>
         <div>军事军事军事军事</div>
         <div>论坛论坛论坛论坛</div>
         <div>美妆美妆美妆美妆</div>
      </div>
  </div>
  <div id="tab" >
     <div> </div>
     <div></div>
     <div></div>
  </div>
    <script>
        let lis=document.querySelectorAll("#wrap ul li")
        var divs=document.querySelectorAll("#wrap .content div")
        for(let i=0;i<lis.length;i++){
          lis[i].onclick=function(){
            // 所有的li的class的清空
             for(let j=0;j<lis.length;j++){
                lis[j].className=""
                divs[j].style.display="none"
             }
            //  当前的加上active的class
              this.className="active"
              divs[i].style.display="block";
          }
        }

      
    </script>
</body>
</html>